﻿<!DOCTYPE HTML>
<html ng-app="demoApp" lang="en">
<head>
    <title id='Description'>AngularJS Chart Column Range Series with Logarithmic Axis</title>
   <meta name="description" content="This is an example of AngularJS Chart. Range Series with Logarithmic Axis are displayed." />		
    <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script><script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

            var sampleData = [{ a: 0.35, b: 14.5, c: 0.35, d: 0.1 }, { a: 1, b: 2.5, c: 1, d: 0.2 }, { a: 10, b: 0.5, c: 10, d: 50 }, { a: 100, b: 205, c: 100, d: 40 }, { a: 1, b: 100, c: 1, d: 200 }, { a: 5.11, b: 10.13, c: 5.11, d: 0.2 }, { a: 20.13, b: 10.13, c: 20.13, d: 4 }];

            var settings = {
                title: "Logarithmic Column Range",
                description: "logarithmic scale with base 2",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                enableAnimations: true,
                colorScheme: 'scheme07',
                xAxis:
                        {
                            dataField: '',
                            description: '',
                            showGridLines: true,
                            showTickMarks: true,
                            gridLinesDashStyle: '2,2',
                            tickMarksDashStyle: '1,2'
                        },
                seriesGroups:
                        [
                            {
                            type: 'rangecolumn',
                            valueAxis: {
                                description: 'Value',
                                logarithmicScale: true,
                                logarithmicScaleBase: 2,
                                unitInterval: 1,
                                formatSettings: { decimalPlaces: 3 },
                                gridLinesDashStyle: '2,2',
                                tickMarksDashStyle: '1,2'
                            },
                            series: [
                                        { dataFieldFrom: 'a', dataFieldTo: 'b', displayText: 'from A to B'},
                                        { dataFieldFrom: 'c', dataFieldTo: 'd', displayText: 'from C to D'}
                                    ]
                            }
                        ]
            };


            $scope.chartSettings = settings;
        });
    </script>
</head>
<body ng-controller="demoController">
    <jqx-chart id='chartContainer' jqx-settings="chartSettings" style="width: 850px; height: 500px"></jqx-chart>
</body>
</html>
